<script setup lang="ts">
import file from '@/api/file'

const props = defineProps({
  imageIds: {
    type: Array,
    default: [],
  },
})

const imageList = ref<any[]>([])
const initing = ref<boolean>(false)
async function initList() {
  if (initing.value === false) {
    imageList.value = []
    initing.value = true
    for (let id of props.imageIds) {
      if (id) {
        const imageUrl = await file.downloadImage(id)
        imageList.value.push({
          name: id,
          url: imageUrl,
          status: 'success',
          message: '上传成功',
          type: 'image',
        })
      }
    }
    initing.value = false
  }
}

onMounted(() => {
  initList()
})

watch(() => props.imageIds, () => {
  initList()
})
</script>

<template>
  <div class="imageList">
    <nut-uploader
      v-model:file-list="imageList"
      maximum="1"
      :is-deletable="false"
      disabled
    />
  </div>
</template>

<style lang="sass" scoped>
.imageList
  padding:15px 10px 5px 20px

:deep(.nut-uploader__preview )
  flex: 1

</style>
